<template>
  <div>
    <el-form ref="searchFormRef" :model="searchForm" label-width="100px" :inline="true">
      <span class="spn">
        <el-form-item>
          <el-input v-model="searchForm.customerName" class="inputCss" placeholder="姓名、手机号、会员号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchBtn">搜索顾客</el-button>
        </el-form-item>
      </span>
    </el-form>
    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="withDrawList">
      <el-table-column label="名称" prop="projectName" />
      <el-table-column label="项目单号" prop="projectNumber" align="center" />
      <el-table-column label="订单号" prop="orderNumber" align="center" />
      <el-table-column label="创建时间" prop="createdTime" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="顾客" prop="customerName" align="center" />
      <el-table-column label="总次数" prop="totalNumber" align="center" />
      <el-table-column label="已划扣次数" prop="deductedNumber" align="center" />
      <el-table-column label="剩余次数" prop="surplusNumber" align="center" />
      <el-table-column label="操作" min-width="120" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="drawBtn(scope.row)">划扣</el-button>
          <!-- <el-button type="text" @click="appointmentBtn(scope.row)">预约</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    <!-- 划扣 -->
    <Dialog :title="title" :visible.sync="visible" :button-text="testBtn" :reveal="show" :loading="loading" class="dialogStyle" @close="handleClose" @confirm="submitForm">
      <div v-if="flag">
        <el-table v-loading="loading" :data="withDrawData">
          <el-table-column label="顾客" prop="customerName" />
          <el-table-column label="项目" prop="projectName" />
          <el-table-column label="剩余次数" prop="surplusNumber" />
          <el-table-column label="执行数量" prop="deductionAmount">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.deductionAmount" controls-position="right" :min="0" :max="scope.row.surplusNumber" />
            </template>
          </el-table-column>
        </el-table>
        <el-form ref="formInlineRef" :inline="true" :model="formInline" :rules="formInlineRules" label-width="80px" label-position="right" class="formInlineCss">
          <el-row>
            <el-col :span="12">
              <el-form-item label="主医生：" prop="doctorPrincipal">
                <el-select v-model="formInline.doctorPrincipal" placeholder="请选择">
                  <el-option v-for="item in allDoctorOptions" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="麻醉医生：">
                <el-select v-model="formInline.doctorAssist" placeholder="请选择">
                  <el-option v-for="item in allDoctorOptions" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="主护士：">
                <el-select v-model="formInline.nursePrincipal" placeholder="请选择">
                  <el-option v-for="item in allNurseOptions" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="辅助护士：">
                <el-select v-model="formInline.nurseAssist" placeholder="请选择">
                  <el-option v-for="item in allNurseOptions" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-form-item label="手术室/美容室：">
              <el-button @click="selectBeautyBtn">请点击</el-button>
            </el-form-item>
          </el-row> -->
          <el-row>
            <el-form-item label="备注：" class="remarkCss">
              <el-input v-model="formInline.remark" type="textarea" />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div v-if="flag==false">
        <el-steps :active="active" align-center space="160px">
          <el-step title="选择医生" />
          <el-step title="预约时间" />
          <el-step title="选择手术/美容室" />
          <el-step title="确认信息并提交" />
        </el-steps>
        <div v-if="active===1">
          <el-form :inline="true" :model="formInline" class="formInlineCss">
            <el-row>
              <el-col :span="6">
                <el-form-item>
                  <el-select v-model="formInline.bumen" placeholder="请选择部门">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item>
                  <el-input v-model="formInline.name" placeholder="姓名" />
                </el-form-item>
                <el-form-item>
                  <el-button @click="onSubmit">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table :data="tableData">
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="bumen" label="部门" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="selelctDrawBtn(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="active===2">
          <FullCalendar @selectdate="handleSelectdate" @selectTime="handleSelectTime" />
        </div>
        <div v-if="active===3">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
            <el-form-item label="手术/美容室" prop="region">
              <el-select v-model="ruleForm.name" placeholder="请选择手术/美容室" @change="handleChange">
                <el-option label="手术室1" value="手术室1" />
                <el-option label="手术室2" value="手术室2" disabled />
                <el-option label="手术室3" value="手术室3" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="active===4">
          <el-form ref="form" :model="submitFormData" label-width="100px" class="submitFormCss">
            <el-form-item label="顾客：">
              {{ ruleForm.kuge }}
            </el-form-item>
            <el-form-item label="项目名称：">
              {{ ruleForm.xaingmu }}
            </el-form-item>
            <el-form-item label="医生：">
              {{ ruleForm.yisheng }}
            </el-form-item>
            <el-form-item label="预约时间：">
              {{ ruleForm.date }}
            </el-form-item>
            <el-form-item label="手术/美容室：">
              {{ ruleForm.name }}
            </el-form-item>
          </el-form>
        </div>
      </div>
    </Dialog>
    <Dialog :title="titleTwo" :visible.sync="visibleTwo" :button-text="testBtn" :loading="loading" @confirm="submitFormTwo">
      <Twotabs :label="label" @cheackTabs="cheackTabs">
        <div slot="0" class="tabsCss">
          <span class="spn">201</span>
          <span class="spn">202</span>
          <span class="spn">203</span>
          <span class="spn">204</span>
        </div>
        <div slot="1">
          美容室
        </div>
      </Twotabs>
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog/index";
import Twotabs from '@/components/Twotabs/index';
import FullCalendar from "@/components/FullCalendar/index";
export default {
  components: {
    Dialog,
    Twotabs,
    FullCalendar,
  },
  data() {
    return {
      searchForm: {},
      allDoctorOptions: [],
      allNurseOptions: [],
      options: [],
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      withDrawList: [],
      withDrawData: [],
      drawData: {},
      formInline: {},
      active: 1,
      tableData: [],
      title: "",
      testBtn: "", // 对话框按钮名称
      visible: false,
      titleTwo: "",
      testBtnTwo: "",
      show: true,
      visibleTwo: false,
      loading: false,
      flag: false,
      label: ['手术室', '美容室'],
      selectSubscribeDate: "", // 预约日期
      selectSubscribeTime: '', // 预约时间
      ruleForm: {},
      submitFormData: {},
      formInlineRules: {
        doctorPrincipal: [
          { required: true, message: '请选择主医生', trigger: 'blur' },
        ],
      },
    };
  },
  created() {
    this.getWithDrawList();
  },
  methods: {
    async getWithDrawList() {
      this.loading = true;
      const res = await this.$api['department/project/deduction']({ ...this.params, query: this.searchForm });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询项目划扣列表失败！');
      this.withDrawList = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getWithDrawList();
    },
    // 搜索
    searchBtn() {
      this.getWithDrawList();
    },
    // 医生人员
    async getAllDoctorData() {
      const res = await this.$api['department/project/findAllDoctor']();
      if (res.code === 200) {
        this.allDoctorOptions = res.data;
      }
    },
    // 护士人员
    async getAllNurseData() {
      const res = await this.$api['department/project/findAllNurse']();
      if (res.code === 200) {
        this.allNurseOptions = res.data;
      }
    },
    // 划扣
    drawBtn(row) {
      console.log(row);
      this.drawData = row;
      row.surplusNumber = Number(row.surplusNumber);
      const drawArr = [];
      drawArr.push(row);
      this.withDrawData = drawArr;
      this.title = "执行";
      this.testBtn = "划扣";
      this.flag = true;
      this.visible = true;
      this.getAllDoctorData();
      this.getAllNurseData();
    },
    // 选择手术室或者美容室
    // selectBeautyBtn() {
    //   this.titleTwo = "手术室/美容室选择";
    //   this.testBtn = "提交";
    //   this.visibleTwo = true;
    // },
    cheackTabs(val) {
      console.log(val);
    },
    // 预约
    // appointmentBtn(row) {
    //   this.title = "给" + row.guke + "新增预约";
    //   this.show = false;
    //   this.flag = false;
    //   this.visible = true;
    // },
    // 预约-搜索
    onSubmit() {

    },
    // 预约-选择
    selelctDrawBtn() {
      this.active = 2;
    },
    // 预约日期上半部分
    handleSelectdate(val) {
      // console.log(val);
      this.selectSubscribeDate = val;
    },
    SelectdateChange() {
      if (!this.selectSubscribeDate) {
        const myDate = new Date();
        const time = myDate.toLocaleDateString().split('/').join('-');
        this.selectSubscribeDate = time;
      }
      // console.log(this.selectSubscribeDate);
    },
    // 预约时间下半部分
    handleSelectTime(val) {
      console.log(val);
      this.SelectdateChange();
      this.selectSubscribeTime = val;
      this.active = 3;
      this.selectSubscribeDate = '';
    },
    // 监听手术/美容室选择变化
    handleChange(val) {
      // console.log(val);
      console.log(this.ruleForm.name);
      this.show = true;
      this.testBtn = "提交";
      this.active = 4;
    },
    // 提交
    async submitForm() {
      this.drawData.projectDeductionId = this.drawData.id;
      console.log({ ...this.drawData, ...this.formInline });
      this.loading = true;
      const res = await this.$api['department/project/record']({ ...this.drawData, ...this.formInline });
      this.loading = false;
      console.log(res);
      if (res.code !== 200) return this.$message.error('划扣失败！');
      this.$message.success('划扣成功!');
      this.visible = false;
      this.$refs.formInlineRef.resetFields();
    },
    handleClose() {
      this.active = 1;
      this.visible = false;
      this.$refs.formInlineRef.resetFields();
    },
    submitFormTwo() {
      this.visibleTwo = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.formInlineCss {
  margin-top: 20px;
}
.tabsCss {
  display: flex;
  justify-content: center;
  .spn {
    margin: 0 30px;
    width: 188px;
    height: 188px;
    line-height: 188px;
    text-align: center;
    border: 1px solid #ccc;
    background: rgba(0, 0, 0, 0);
    box-shadow: 0px 3px 6px rgba(0, 130, 206, 0.49);
    opacity: 1;
    cursor: pointer;
  }
  .active {
    background-color: #71c9ce;
  }
}
.submitFormCss {
  position: relative;
  left: 50%;
  transform: translateX(-12%);
}
</style>
